<template>
    <div class="all">
        <div class="search" style="margin-right: 20px;">
            <el-form
                ref="form"
                :inline="true"
                :model="form"
                label-width="80px"
                size="small"
            >
                <el-form-item label="关键词:" prop="version" style="margin:20px 0 0 20px;">
                    <el-input v-model="form.keyword" placeholder="请输入" size="small"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="search"
                    >查询
                    </el-button
                    >
                    <el-button @click="resetSearch">重置</el-button>
                </el-form-item>
            </el-form>
            <div class="top">
                <div></div>
                <el-button type="primary" size="small" @click="clickToAdd"
                           v-if="permitId && Array.isArray(permitId) && permitId.includes('farmManageAdd')">+ 新增
                </el-button>
            </div>
        </div>

        <div class="content">

            <el-table
                :data="farmList.items"
                size="small"
                max-height="550px"
                style="border: 1px solid #e0e0e0;width: calc(100% - 20px);margin-left: 10px;">
                <el-table-column
                    prop="id"
                    label="序号"
                    align="center"
                    width="60">
                    <template slot-scope="{ row, $index }">
                        <div>{{ $index + 1 }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="农场名称"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="sn"
                    label="农场编号"
                    height="50"
                    width="100"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="longitude"
                    label="经度"
                    height="50"
                    width="160"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="latitude"
                    label="纬度"
                    height="50"
                    width="160"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="acreage"
                    label="种植面积"
                    height="50"
                    width="160"
                    align="center">
                    <template slot-scope="{ row }">
                        <div>{{ row.acreage }}m²</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="remark"
                    label="备注"
                    height="50"
                    width="160"
                    align="center">
                </el-table-column>
                <el-table-column label="操作" align="center" width="120">
                    <template slot-scope="{ row, $index }">
                        <el-button type="text" @click="clickToEdit($event, row)"
                                   v-if="permitId && Array.isArray(permitId) && permitId.includes('farmManageEdit')"
                        >修改
                        </el-button
                        >
                        <el-button
                            type="text"
                            @click="clickToDel($event, row)"
                            v-if="permitId && Array.isArray(permitId) && permitId.includes('farmManageDel')"
                            style="color: red">删除
                        </el-button>
                        <div v-if="shouldDisplayDiv" style="width: 1px; height: 50px"></div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="farmList.total"
                    :page-size="form.size"
                    :current-page="form.page"
                    @current-change="currentChange">
                </el-pagination>
            </div>
        </div>
        <Create ref="create"></Create>
        <Update ref="update"></Update>
    </div>
</template>

<script>
import {farmList, delFarm} from "@/index/api/index/adoption/farm/farm"
import {mapState} from "vuex";

export default {
    computed: {
        ...mapState(["permitId"]),
        shouldDisplayDiv() {
            return !(this.permitId && Array.isArray(this.permitId) &&
                (this.permitId.includes('farmManageEdit') || this.permitId.includes('farmManageDel')));
        }
    },
    components: {
        Create: () => import("./create"),
        Update: () => import("./update")
    },
    data() {
        return {
            form: {
                size: 10,
                page: 1,
                keyword: ''
            },
            farmList: {}
        };
    },
    mounted() {
        this.getFarmList()
    },
    methods: {
        getFarmList() {
            farmList(this.form).then(res => {
                this.farmList = res.data
            })
        },
        search() {
            this.getFarmList()
        },
        resetSearch() {
            this.form.keyword = ''
            this.getFarmList()
        },
        clickToAdd() {
            this.$refs.create.showDialog()
        },
        clickToEdit(e, row) {
            this.$refs.update.showDialog(e, row)
        },
        clickToDel(e, row) {
            this.$confirm("确定要删除吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delFarm(row.id).then((res) => {
                    if (res.code == 200) {
                        this.$message({
                            message: res.message,
                            type: "success",
                        });
                        this.currentChange()
                        this.getFarmList();
                    } else {
                        this.$message({
                            message: res.message,
                            type: "error",
                        });
                    }
                });
            })
                .catch(() => {
                })
        },
        currentChange(val) {
            this.form.page = val
            if (this.farmList.items.length == 0) {
                this.form.page = val - 1
            }
            this.getFarmList()
        }
    },

}
</script>

<style lang="less" scoped>
.all {
    width: 100%;
    background-color: #fff;
    border-radius: 5px;

    .content {
        width: 100%;
        // height: 45vh;
        background-color: #fff;
        border-radius: 5px;

        .top {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .el-button {
                margin-right: 3vw;
            }
        }
    }
}

.el-form-item {
    margin: 0px 0 0 0 !important;
}
</style>
